<template>
	<view class="min-h-[100vh] bg-background">
		<view class="px-[32rpx] py-[24rpx]">
			<view class="bg-white p-[8rpx] rounded-[16rpx]" v-if="order.address">
				<view class="gradation text-[30rpx] font-bold tracking-[1px] p-[24rpx]">
					<view class="mb-[12rpx]">{{ order.address?.province }} {{ order.address?.city }} {{ order.address?.area }}</view>
					<view class="">{{ order.address?.addressDetail }}</view>
					<view class="font-normal text-[24rpx] text-gray mt-[24rpx]">
						<text>{{ order.address?.name }}</text>
						<text>{{ order.address?.phone }}</text>
					</view>
				</view>
			</view>
			<view class="bg-white p-[8rpx] rounded-[16rpx]" v-if="order.shop">
				<view class="gradation text-[30rpx] font-bold tracking-[1px] p-[24rpx]">
					<view class="mb-[12rpx]">{{ order.shop?.name }}</view>
					<view class="">{{ order.shop?.address }}</view>
				</view>
			</view>
			<view class="bg-white rounded-[16rpx] mt-[24rpx]">
				<view class="px-[30rpx]">
					<view class="flex py-[30rpx] items-center justify-between border-b border-background">
						<view class="flex items-center">
							<up-image :src="shop" width="32rpx" height="32rpx"></up-image>
							<view class="text-[26rpx] font-bold ml-[12rpx]">{{ typeMap[order.order?.type] }}订单</view>
						</view>
						<view class="text-[22rpx] flex items-center">
							<view class="">{{ statusMap[order.order?.status] }}</view>
							<view class="flex items-center" v-if="order.order?.status == 101">
								<view class="">，剩余</view>
								<up-count-down :time="order.timeCanal" format="mm分ss秒"></up-count-down>
							</view>
						</view>
					</view>
				</view>
				<view class="">
					<OrderDrinkList :list="order.appOrderGoodList"></OrderDrinkList>
				</view>
				<view class="flex items-center justify-end">
					<view class="flex items-center p-[30rpx]" v-if="order.order?.status == 101">
						<view class="option border-[#E5E5E5]">取消订单</view>
						<view class="option border-[#FF0000] text-[#FF0000]">继续付款</view>
					</view>
				</view>
			</view>
			<view class="bg-white rounded-[16rpx] mt-[24rpx] px-[30rpx]">
				<view class="py-[30rpx] border-b border-background">
					<view class="cell">
						<view class="">商品金额</view>
						<view class="text-[30rpx] font-bold">￥{{ order.order?.totalPrice }}</view>
					</view>
					<view class="cell">
						<view class="">实际支付</view>
						<view class="text-[30rpx] text-[#FF0000] font-bold">￥{{ order.order?.price }}</view>
					</view>
				</view>
				<view class="py-[30rpx]">
					<view class="cell">
						<view class="">订单编码</view>
						<view class="flex items-center">
							<view class="mr-[24rpx]">{{ order.order?.orderSn }}</view>
							<view class="copy" @click="copyText(order.order?.orderSn)">复制</view>
						</view>
					</view>
					<view class="cell">
						<view class="">支付方式</view>
						<view class="flex items-center">
							<up-image :src="wx" width="32rpx" height="32rpx"></up-image>
							<view class="ml-[8rpx]">微信支付</view>
						</view>
					</view>
					<view class="cell">
						<view class="">下单时间</view>
						<view class="">{{ order.order?.createTime }}</view>
					</view>
					<view class="cell" v-if="order.order?.payTime">
						<view class="">支付时间</view>
						<view class="">{{ order.order?.payTime }}</view>
					</view>
				</view>
			</view>
		</view>
		<CustomerService></CustomerService>
	</view>
</template>

<script setup>
import { readonly, ref } from 'vue';
import { getOrderDetail } from '@/config/api/order';
import shop from '@/static/shop.png';
import wx from '@/static/wx.png';
import { copyText } from '@/utils/utils';
import { onLoad } from '@dcloudio/uni-app';
const { order, queryOrderDetail, typeMap, statusMap } = useOrderDetail();
onLoad((options) => {
	queryOrderDetail(options.orderId);
});
function useOrderDetail() {
	const order = ref({});
	const typeMap = readonly({
		0: '堂食',
		1: '外卖',
		2: '商城'
	});
	const statusMap = readonly({
		101: '待付款',
		201: '已支付',
		202: '已取消',
		301: '待配送',
		401: '已配送',
		501: '已评价',
		502: '申请退款',
		503: '退款中',
		504: '退款完成'
	});
	const queryOrderDetail = async (orderId) => {
		try {
			const res = await getOrderDetail(orderId);
			if (res.code == 200) {
				order.value = res.data;
			}
		} catch (e) {
			//TODO handle the exception
		}
	};
	return {
		order,
		queryOrderDetail,
		typeMap,
		statusMap
	};
}
</script>

<style lang="scss" scoped>
.option {
	@apply w-[160rpx] h-[66rpx] rounded-full border flex items-center justify-center text-[26rpx] mr-[12rpx] last:mr-0;
}

.gradation {
	@apply w-[100%] h-[100%] rounded-[16rpx] bg-gradient-to-r from-[#F0F2F5] to-[#FFFFFF];
}

.cell {
	@apply flex items-center justify-between mb-[20rpx] text-[24rpx] last:mb-0;
}

.copy {
	@apply w-[64rpx] h-[40rpx] flex items-center justify-center rounded-full bg-background text-[18rpx];
}
</style>
